Mobile is important for pretty much any website these days, and responsive design is by far the most popular way to cater to mobile visitors. Sure there are other solutions (e.g., mobile-specific sites or apps, for example). But from an SEO point of view, responsive design is hard to beat.
You can start from scratch, but it is often easier to use a framework such as Bootstrap. Using Bootstrap, you can create a nice-looking, simple, and responsive design super quickly.
Here’s how:
Getting Started
To get started, all you need to do is create an HTML file (or PHP for that matter) and link to the core Bootstrap files. There are two CSS files (one is optional), one Javascript (JS) file, and a few icons. You will also need to link to Jquery to make the Bootstrap JS file work correctly.
There are two ways to do this:
Using the Bootstrap CDN
All of the required Bootstrap files are hosted and available free of charge on a content delivery network (CDN), provided by MaxCDN, which means all you need to do is include links to those files in your HTML and everything will automatically work.
Here’s the links you’ll need:
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>
Important Note: There are a couple of other recommended bits of header code to include too, so check the Bootstrap “Getting Started” page to see what you need to include or, alternatively, if you are new to Bootstrap, click here for a simple guide to creating a Bootstrap template that I wrote recently.
The upside to this from an SEO point of view is the CDN ensures these files load super fast, which is good for user experience. Additionally, because these same files are used on thousands of other sites, many users will already have them cached.
The downside is you won’t be able to edit any of those files (although that could be a good thing really) and that you must keep your site up-to-date in case of any major Bootstrap updates (again, arguably a good thing).
Downloading the Files
For the experts, you can download the core LESS files and customise to your heart’s content. But for most users, just
downloading the standard precompiled CSS / JS is fine. You will get a folder with the files you need and you can then link to them from your HTML just as above, except of course the urls you link to will be wherever you upload the files to.
Create Another CSS File
Whichever option you choose, you will almost certainly want to add styles of your own. Bootstrap provides a framework, but you will need to customize it to your needs. You could edit the Bootstrap CSS directly, but it is best to create a new CSS file for your edits, in case you want to update your Bootstrap files down the line.
Creating Your Design
Remember, the main reason you’re creating a responsive design is to improve the user experience for your visitors. So start by planning how you want your site to look. There are four sizes in Bootstrap by default:
- xs (mobile devices)
- sm (large tablets and netbooks)
- md (small to medium computers)
- lg (large computers)
But you don’t have to create four different layouts. Many people just have one layout for mobile devices (typically single column) and a basic two-column layout for any other screen. (You can also make small changes as you move to a larger screen.)
Let’s demonstrate this with a very simple example using a two-column layout:
And here is how it might look on a smaller screen:
To achieve this column design using bootstrap, all you need to do is enter the following code into your HTML page (excluding the code for the header):
This is the sidebar
This is the main content
There is
full documentation of how to use the CSS, components, and JS that is included in Bootstrap on the site. So I won’t bother going through everything here. Hopefully though, creating the actual layout won’t be difficult. So what about the SEO aspect?
SEO Considerations for Bootstrap
The main SEO considerations fall under two areas: user experience and load speed. Of course responsive design is principally about user experience, so as long as you think about your users as you design your site, you should be good.
Load speed, on the other hand, is always a tricky issue, as the demands on load speed vary from device to device, and you want to provide the best overall experience to each user regardless of device and bandwidth.
That being said, let’s explore how we can make our Bootstrap pages load super fast on all devices.
Creating a Fast Page
The biggest downside to Bootstrap in terms of SEO terms is the CSS and JS files are relatively big, and in most cases, you will not be fully utilizing every aspect of that code. This means that your users are downloading unnecessary data.
The easiest way to speed things up is to make sure you link to the minified files rather than the normal ones. But you can do a lot more to speed things up by using the Bootstrap customizer:
Step 1 – Create your design and HTML
I recommend you download the regular, pre-compiled Bootstrap files and create your page as normal. Make sure to create your own CSS file. Don’t make any changes to the core CSS or JS files.
As you code your page, make a note of which aspects of Bootstrap you are using.
For example:
- Are you using any tables? Or just divs?
- Are you using buttons? Or creating your own?
- Are you using the default typography?
Step 2 – Create a custom Bootstrap
Once you have completed your design, go to the
Bootstrap custom compiler. You will see, at the top of the page, a long list of checkboxes. Hopefully, you now know which aspects of Bootstrap you actually need.
Uncheck any of the boxes you don’t need. If in doubt, uncheck it. (You can always add it again later.) You can also make edits to the individual settings, such as colors, padding, and even the number of columns. (The default is 12.)
Side Note: You may think you only need two columns, but 12 is actually a very good number because it divides by 1, 2, 3, 4, 6, and 12, which gives you an awesome amount of flexibility. So my advice is to stick with 12 unless you have some really specific requirements.
(If you don’t understand these options, simply leave them for the time being. However, if you have had to make many changes in your own CSS file, you might be over-riding settings you could change here instead.)
With a bit of practice, you can make your Bootstrap files much more efficient by customizing these settings, and hopefully, avoid having to use excessive amounts of additional CSS in your own CSS file.
Step 3 – Compile and download
Once you have finished editing your settings (or skipping past them), click the compile and download button at the bottom of the page for your custom Bootstrap files. Now, simply unzip them and replace the original files with your customized ones.
Hopefully, the page(s) you’ve created look and work exactly the same. Test them thoroughly, and if you find anything is not working, go back to the customizer and make sure you checked all of the right boxes (including any you were unsure about before).
For a fairly simple website, you can probably halve, at least, the size of your Bootstrap files by going through this process, which would make your site much faster.
Creating Faster Images
Images are tricky when you’re talking about responsive design because big screens obviously need bigger images. You don’t want to be sending a 1600px image to a mobile browser because that’s a waste of bandwidth.
Unfortunately, there is no good solution to this problem yet. But here are a couple of techniques that can help make things faster:
Use media queries for backgrounds
This only works for background images, since we are going to use CSS media queries to serve the right image. But if you have any background images on your site, that might help to reduce load times substantially.
Start by taking your main, full size background image and creating a smaller version of it (and maybe also a medium version, if you wish). Now just include the following CSS for the element that contains your background image:
#header {
background-image: url(largeimage.jpg);
}
@media only screen and (max-width: 320px){
#header {
background-image:url(smallimage.jpg);
}
}
This will ensure that on smaller screens a smaller image will be downloaded, as the media query will override the original CSS property.
This article offers a really thorough
guide to optimizing images for responsive sites, so check it out for more details.
Using media queries for images
There is no good option to use the same technique for regular images. However, one solution is to use background images instead of HTML img tags. The downside to this is that you miss out on the opportunity to include an alt tag, which is bad for SEO.
Yet if you have a very image-heavy site, using this technique could substantially reduce load time for your mobile visitors. You’ll have to make a decision as to which option is most important.
One alternative is to include a regular image:
Then use the following CSS:
@media only screen and (min-width: 320px){
#imageholder {
background-image:url(largeimage.jpg);
}
#imageholder img {
display:none;
}
}
As you can see, on larger screens the smaller image will be hidden and replaced with a background image at a much higher resolution.
With this technique, every user download the small image, but only desktop users download the (much larger) large image. This saves download time for mobile users, yet still gives you the opportunity to use an alt tag.
As of right now, it’s not clear how this would impact SEO, since you are effectively hiding that image from desktop users. But if you have a lot of images, this could be a good compromise, and it will certainly improve load times for mobile users, which can only be a good thing.
Summary
This isn’t a one-size-fits-all sort of a topic since every site is different, but the better you get to know Bootstrap, the more you can do with it.
Remember, Bootstrap, at its core, is a tool for making sites responsive and, hence, improving user experience. That, to my mind, makes it well worth investigating.
